<template>
  <div
    v-show="isShow"
    class="Container"
    ref="dragContainer"
    id="dragContainer"
    :style="{ height: containerHeight }"
  >
    <div class="controlBar">
      <div class="dragBar" @mousedown="startDrag">控制窗口</div>
      <!-- <div
        class="expandBtn"
        @click.stop="toggleExpand"
        :class="{ expanded: isExpanded }"
      ></div> -->
    </div>

    <!-- <div v-if="isExpanded"> -->
    <div class="expandContainer">
      <div>
        <!-- 需要获取 -->
        <ProductSelect :menu="menus[menuIndex]" />
      </div>
      <div
        class="expandableModule"
        @click="toggleProductOperate"
        :class="{ expanded: isProductOperateExpanded }"
        v-if="
          (isTimeOperator &&
            $route.name !== 'yuntu' &&
            $route.name !== 'typhoon' &&
            $route.name !== 'GBA' &&
            $route.name !== 'SZ') ||
          $route.name == 'BXFB'
        "
      >
        产品操作
      </div>
      <!-- <div
        v-show="isProductOperateExpanded"
        class="operate"
        v-if="$route.name == 'BXFB'"
      >
        <BXFB v-if="$route.name === 'BXFB'"></BXFB>
      </div> -->
      <div
        v-show="isProductOperateExpanded"
        class="operate"
        v-if="isTimeOperator"
      >
        <ProductOperate
          :isSelect2="isSelect2"
          :isSelect3="isSelect3"
          @changeSelectSign="changeSelectSign"
          @changeSelectView="changeSelectView"
        />
        <!-- 需要获取 -->
        <TimeOperate
          v-if="timeIndex !== -1"
          :start-time="timeMenu[timeIndex].startTime"
          :end-time="timeMenu[timeIndex].endTime"
          :minuteInterval="timeMenu[timeIndex].minuteInterval"
          :hourInterval="timeMenu[timeIndex].hourInterval"
          :barDate="barDate"
          :isPredict="nowPredict"
          @update-data="updateData"
        />
        <div v-if="nowPredict" class="predict">
          <span>预测时效:{{predictVal}}</span>
          <!-- <el-select
            v-model="predictVal"
            class="m-2 predictSelect"
            size="small"
          >
            <el-option
              v-for="value in generateArray(nowPredict)"
              :key="value"
              :label="value"
              :value="value"
            />
          </el-select> -->
          <span>{{ timeTrans[nowPredict.type] }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ProductSelect from "./ProductSelect.vue";
import ProductOperate from "./ProductOperate.vue";
import TimeOperate from "./TimeOperate.vue";
import BXFB from "./BXFB.vue";
export default {
  components: {
    ProductSelect,
    ProductOperate,
    TimeOperate,
    BXFB,
  },
  props: {
    isShow: {
      type: Boolean,
      required: false,
      default: true,
    },
    timeMenu: {
      type: Array,
      require: true,
    },
    barTime: {},
    menuIndex: 0,
    timeIndex: 0,
    isSelect2: {
      type: Boolean,
      default: false,
    },
    isSelect3: {
      type: Boolean,
      default: false,
    },
    isTimeOperator: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      isDragging: false,
      isExpanded: false,
      startX: 0,
      startY: 0,
      containerX: 0,
      containerY: 0,
      isProductSelectExpanded: false,
      isProductOperateExpanded: false,
      containerHeight: "auto",
      container: null,
      startTime: new Date(2021, 1, 20),
      endTime: new Date(2024, 1, 20),
      predictVal: null,
      timeTrans: { hours: "小时", minutes: "分钟" },
      menus: [
        {
          index: "0",
          title: [],
          options: [
            [
              { value: "yuntu", text: "卫星云图" },
              { value: "radarPic", text: "雷达拼图" },
            ],
          ],
        },
        {
          index: "1",
          title: [],
          options: [
            [
              { value: "floodMonitor", text: "洪涝灾害监测" },
              { value: "subsidenceMonitor", text: "形变监测" },
            ],
          ],
        },
        {
          index: "2",
          title: ["灾害天气识别", "灾害事件识别"],
          options: [
            [
              { value: "qpe", text: "QPE" },
              { value: "recognition", text: "雷暴大风识别" },
            ],
            [
              { value: "typhoonPredict", text: "台风预测" },
              { value: "yuntuRecognition", text: "卫星云图识别分类" },
            ],
          ],
        },
        {
          index: "3",
          title: ["灾害天气预警", "灾害事件预警"],
          options: [
            [
              { value: "dbz", text: "QPF（DBZ）" },
              { value: "rainfall", text: "QPF（降水）" },
              { value: "qpfgl", text: "QPF（光流法）" },
              { value: "forecast", text: "雷暴大风外推预警" },
              { value: "convectivegust", text: "雷暴大风潜势预警" },
              { value: "strongrain", text: "强降水预警" },
              { value: "wind", text: "大风预警" },
              { value: "typhoon", text: "台风路径预测" },
            ],
            [
              { value: "floodForecast", text: "洪涝预测" },
              { value: "storm", text: "风暴增水预报" },
              { value: "hoursmax", text: "24小时最大增水" },
              { value: "waterlogging", text: "内涝预警" },
              { value: "GBA", text: "大湾区洪涝风险预评估" },
              { value: "SZ", text: "深圳洪涝风险预评估" },
            ],
          ],
        },
        {
          index: "4",
          title: [],
          options: [[{ value: "FQYJ", text: "分区预警" }]],
        },
        {
          index: "5",
          title: [],
          options: [[{ value: "BXFB", text: "精准靶向发布" }]],
        },
        {
          index: "6",
          title: [],
          options: [[
                    { value: "RecTechnology", text: "识别技术" },
                    { value: "Features", text: "气候特征" }
                  ]],
        },
        {
          index: "7",
          title: [],
          options: [[
                    { value: "Strategy", text: "早期风险识别技术规范" },
                    { value: "Methods", text: "平台说明手册" }
                  ]],
        },
        {
          index: "8",
          title: [],
          options: [[{ value: "Overview", text: "暴雨灾害链风险图" }]],
        },
      ],
      selectTime: null,
      nowPredict: null,
      barDate: null,
      barIndex: null,
    };
  },
  mounted() {
    if (this.$refs.dragContainer) {
      const rect = this.$refs.dragContainer.getBoundingClientRect();
      this.containerX = rect.left;
      this.containerY = rect.top;
    }
    //需要获取
    
    this.nowPredict = (this.timeIndex == -1) ? null : this.timeMenu[this.timeIndex].predict;
    console.log(this.nowPredict, "nowPredict")
    if (this.nowPredict) {
      this.predictVal = this.generateArray(this.nowPredict)[0];
    }
  },
  watch: {
    barTime(newVal) {
      if (newVal instanceof Date) {
        this.barDate = newVal;
      } else if (typeof newVal === "number") {
        this.barIndex = newVal;
        this.predictVal = this.generateArray(this.nowPredict)[this.barIndex];
      }
    },
    timeIndex() {
      if (this.timeMenu[this.timeIndex]) {
        this.nowPredict = (this.timeIndex == -1) ? null : this.timeMenu[this.timeIndex].predict;
        console.log(this.nowPredict, "nowPredict")
        console.log(this.timeIndex)
        if (this.nowPredict) {
          this.predictVal = this.generateArray(this.nowPredict)[0];
        }
      }
    },
    predictVal(newVal, old) {
      this.$emit("changePredict", newVal);
    },
  },
  methods: {
    changeSelectSign(selectSign) {
      this.$emit("changeSelectSign", selectSign);
    },
    changeSelectView(selectView) {
      this.$emit("changeSelectView", selectView);
    },
    changePredict() {
      console.log("276 line")
      this.$emit("changePredict", this.predictVal);
    },

    startDrag(e) {
      if (!this.isDragging) {
        this.isDragging = true;
        this.startX = e.clientX;
        this.startY = e.clientY;
        this.disableTextSelection();
        this.container = e.target.closest(".Container");
        // 添加全局事件监听器
        window.addEventListener("mousemove", this.onDrag);
        window.addEventListener("mouseup", this.stopDrag);
      }
    },
    onDrag(e) {
      if (this.isDragging && this.container) {
        const dx = e.clientX - this.startX;
        const dy = e.clientY - this.startY;
        this.startX = e.clientX;
        this.startY = e.clientY;
        this.containerX += dx;
        this.containerY += dy;
        this.container.style.left = `${this.containerX}px`;
        this.container.style.top = `${this.containerY}px`;
      }
    },
    stopDrag() {
      if (this.isDragging) {
        this.isDragging = false;
        this.enableTextSelection();

        // 移除全局事件监听器
        window.removeEventListener("mousemove", this.onDrag);
        window.removeEventListener("mouseup", this.stopDrag);
      }
    },

    disableTextSelection() {
      document.body.style.userSelect = "none";
      document.body.style.webkitUserSelect = "none"; // 对于旧版本的Webkit浏览器
      document.body.style.mozUserSelect = "none";
      document.body.style.msUserSelect = "none";
    },
    enableTextSelection() {
      document.body.style.userSelect = "";
      document.body.style.webkitUserSelect = "";
      document.body.style.mozUserSelect = "";
      document.body.style.msUserSelect = "";
    },
    toggleProductSelect() {
      this.isProductSelectExpanded = !this.isProductSelectExpanded;
    },
    toggleProductOperate() {
      this.isProductOperateExpanded = !this.isProductOperateExpanded;
    },
    toggleExpand() {
      this.isExpanded = !this.isExpanded;
      this.isProductOperateExpanded = false;
      this.isProductSelectExpanded = false;
    },
    updateData(newVal) {
      this.$emit("changeViewTime", {
        ...newVal,
        predict: this.nowPredict,
      });
    },
    generateArray(item) {
      const rangeParts = item.scope.split("-").map(Number);
      const start = rangeParts[0];
      const end = rangeParts[1];
      const interval = item.interval;
      const extraArray = item.additional;

      let array = [];
      for (let i = start; i <= end; i += interval) {
        array.push(i);
      }

      return array.concat(extraArray).sort((a, b) => a - b);
    },
  },
};
</script>

<style>
.Container {
  position: absolute;
  min-width: 12.5vw;
  width: auto;
  overflow: hidden; /* 防止内容溢出 */
  left: 3vw;
  top: 18vh;
  background-color: white;
  z-index: 1001;
}

.controlBar {
  width: 100%;
  height: 2vw; /* 与拖拽条高度一致 */
  background: linear-gradient(
    180deg,
    rgba(7, 116, 163, 1) 0%,
    rgba(26, 72, 92, 1) 100%
  );
  box-shadow: 5px 5px 10px rgba(20, 140, 138, 0.15);
}
.dragBar {
  width: 100%;
  height: 2vw; /* 拖拽条的高度 */
  cursor: move;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0px;
  line-height: 34.75px;
  color: white;
  text-align: center;
  vertical-align: top;
}

.expandContainer {
  border: solid 10px rgba(186, 226, 245, 1);
}

.expandBtn {
  position: absolute;
  top: 0;
  right: 0;
  width: 2vw;
  height: 2vw;
  cursor: pointer;
  transition: transform 0.3s ease; /* 动画过渡 */
}

.expandBtn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.8vw;
  height: 0.8vw;
  border-top: 2px solid white;
  border-right: 2px solid white;
  transform: translate(-50%, -50%) rotate(45deg); /* 形成箭头 */
  transition: transform 0.3s ease;
}

.expandBtn.expanded::before {
  transform: translate(-50%, -50%) rotate(135deg); /* 点击时旋转箭头 */
}
.expandableModule {
  width: 100%;
  height: 2vw; /* 与拖拽条高度一致 */
  /*  background: linear-gradient(
    90deg,
    rgba(20, 140, 138, 0) 0%,
    rgba(20, 102, 140, 0.6) 100%
  );
  */
  background: rgb(255, 255, 255);
  /*box-shadow: 5px 5px 10px rgba(20, 140, 138, 0.15);*/
  cursor: pointer;
  position: relative;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0px;
  line-height: 34.75px;
  color: rgba(0, 66, 65, 1);
  text-align: center;
  vertical-align: top;
}

.expandableModule::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 1%; /* 调整三角形位置 */
  width: 0.8vw;
  height: 0.8vw;
  border-top: 2px solid rgba(0, 66, 65, 1);
  border-right: 2px solid rgba(0, 66, 65, 1);
  transform: translate(-50%, -50%) rotate(45deg);
  transition: transform 0.3s ease;
}

.expandableModule.expanded::before {
  transform: translate(-50%, -50%) rotate(135deg);
}
.operate {
  min-height: 2vw;
  height: auto;
}
.predict {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.predictSelect {
  width: 30%;
}
</style>
